<template>
	<!-- easyEcharts 实例页面 -->
	<view class="contens">
		<view class="tabs">
			<u-tabs ref="tabs" :list="tabs" bar-width="40" active-color="#2979ff" inactive-color="#606266"
				font-size="30" :current="current" @click="change"></u-tabs>
		</view>
		<view class="timeTabs">
			<u-tabs ref="tabs" :list="timeTabs" active-color="#2979ff" inactive-color="#606266" font-size="30"
				:current="timeIndex" @click="change"></u-tabs>
		</view>
		<view class="charts-box">
			<qiun-data-charts type="line" :chartData="chartData" :echartsH5="true" :echartsApp="true"
				:inScrollView="true" background="none" :ontouch="true" tooltipFormat="xAxisDemo2" />
		</view>
	</view>
</template>

<script>
	import {
		getOverAllByClientId
	} from "@/nxTemp/apis/facility.js"
	export default {
		data() {
			return {
				chartData: {},
				timeIndex: 0,
				tabs: [{
					name: '环境温度'
				}, {
					name: '水温'
				}, {
					name: '湿度',
				}, {
					name: '水位',
				}, {
					name: '含氧量',
				}, {
					name: '光照',
				}, {
					name: '亚酸',
				}, {
					name: 'PH',
				}],
				timeTabs: [{
					name: '分时'
				}, {
					name: '日'
				}, {
					name: '月',
				}],
				current: 0,
			}
		},
		onLoad() {
			this.fatilitydata({
				clientId: "SMI100007",
				endTime: "2022-01-23 23:59:00",
				group: "1h",
				startTime: "2022-01-23 00:00:00"
			});

		},
		methods: {
			fatilitydata: function(args) {
				let that = this;
				getOverAllByClientId(args).then(res => {
						
						let categories = [];
						let series = [];
						let seriesObjectData = [];
					
						for (var i = 0; i < res.length; i++) {
							categories.push(res[i].created);
							// cxArr.push(ix);
							seriesObjectData.push(res[i].temp);
							if (i == res.length - 1) {
								series.push({
									'name': "temp",
									'type': "line",
									'data': seriesObjectData
								});
							}
						}

						that.chartData.categories = categories;
						that.chartData.series = series;
						
						console.log(taht.chartData)
					})
					.catch(err => {})
			},
			change: function(e) {

				this.current = e.index;

				switch (e.index) {

					case 0:
						this.fatilitydata();
						break;
					case 1:
						this.fatilitydata();
						break;
					case 2:
						this.fatilitydata();

				}
			}
		}
	}
</script>

<style scoped>
	.tabs {

		background: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
	}

	.timeTabs {
		position: relative;
		background: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
	}

	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.charts-box {
		width: 200px;
		height: 300px;
	}
</style>
